<template>
  <div class="app-container">
    <Toolbar />
    <div class="main-content">
      <div class="pipeline-and-database">

          <Pipeline
            ref="pipeline"
            @step-selected="handleStepSelected"
            @table-selected="handleTableSelected"
          />

          <DatabasePanel
            :currentStepFields="currentStepFields"
            @table-selected="handleTableSelected"
          />

      </div>
      <div class="details-section">
        <TransformDetails />
      </div>
      <div class="preview-section">
        <DataPreview />
      </div>
    </div>
  </div>
</template>

<script>
import Toolbar from './components/Toolbar.vue';
import Pipeline from './components/Pipeline.vue';
import DataPreview from './components/DataPreview.vue';
import TransformDetails from './components/TransformDetails.vue';
import DatabasePanel from './components/DatabasePanel.vue';

export default {
  name: 'DbView',
  components: {
    Toolbar,
    Pipeline,
    DataPreview,
    TransformDetails,
    DatabasePanel
  },
  data() {
    return {
      currentStepFields: [] // 存储当前步骤字段
    };
  },
  methods: {
    handleTableSelected(selectedTable) {
      if (this.$refs.pipeline) {
        this.$refs.pipeline.updateDatasetOperations(selectedTable);
      }
    },
    handleStepSelected(fields) {
      // 更新当前步骤字段
      this.currentStepFields = fields;
    }
  }
};
</script>

<style>
:root {
  --step-1-color: #4286f4;
  --step-2-color: #ff8c00;
  --step-3-color: #43cea2;
  --step-4-color: #9c27b0;
  --panel-color: #4285F4;
  --card-bg: #ffffff;
  --header-bg: #f8f9fa;
  --table-header-bg: #e9ecef;
  --added-color: #e8f5e9;
  --removed-color: #ffebee;
  --modified-color: #fff3e0;
  --split-color: #e1f5fe;
  --aggregate-color: #f3e5f5;
  --missing-color: #f8f9fa;
  --highlight-color: #e3f2fd;
  --border-color: #e0e0e0;
  --relation-color: #7e57c2;
  --tab-active: #4285F4;
  --tab-inactive: #5f6368;
  --gray-text: #757575;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background: linear-gradient(135deg, #f0f2f5 0%, #e4eaf0 100%);
  color: #333;
  min-height: 100vh;
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  background: white;
  overflow: hidden;
}

/* 主内容区 - 新布局 */
.main-content {
  flex: 1;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  height: calc(100vh - 90px);
}

/* 流水线和数据库区域 */
.pipeline-and-database {
  display: flex;
  gap: 25px;
}

/* 修复：恢复pipeline-section样式 */
.pipeline-section {
  flex: 1;
  min-width: 0;
}

/* 修复：恢复database-section样式 */
.database-section {
  flex-shrink: 0;
  flex-grow: 1;
  min-width: 300px;
}

/* 添加图例样式 */
.legend-section {
  width: 200px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  padding: 20px;
  flex-shrink: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .pipeline-and-database {
    flex-direction: column;
  }

  .database-section {
    width: 100%;
  }
}
</style>
